<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--批量添加-->
<table>
    <thead>
    <th>商品</th>
    <th>价格</th>
    <th>商品库存</th>
    <th>增加</th>
    <th>移除</th>
    </thead>
    <tbody id="data1">
    <tr>
        <td><input type="text" name="goodsName"></td>
        <td><input type="text" name="goodsPrice"></td>
        <td><input type="text" name="number"></td>
        <td><input type="button" onclick="addElement(this)" value="+"></td>
        <td><input type="button" value="-" onclick="delElement(this)"></td>
    </tr>
    </tbody>
</table>
<p><input type="button" id="btn_add" value="批量添加"></p>
</body>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script>

    //批量添加
    $("#btn_add").click(function () {
        var data=[];
        //循环tbody里面所有的tr，并取出每行相对的值,填充到数组中
        $("#data1 tr").each(function (index,obj) {
            data.push({
                goodsName:$("input[name='goodsName']",obj).val(),
                goodsPrice:$("input[name='goodsPrice']",obj).val(),
                number:$("input[name='number']",obj).val(),
            })
        })
        //发起post请求
        $.ajax({
            url:"addListGoods",
            type:"post",
            contentType:"application/json",
            data:JSON.stringify(data),//将对象转为字符
            success:function (response){
                window.location.href="/marketersLogin";
            },
        });

    })
    //复制tr节点的内容
    function addElement(x){
        $(x).parents("tr").clone().appendTo($("#data1"));
    }
    //移除tr节点
    function delElement(x){
        $(x).parents("tr").remove();
    }

</script>
</html>
